<template>
  <div class="mapscatter">
    <div id="map"></div>
  </div>
</template>

<script>
import { styleJson } from '../../utils/utils'
var echarts = require('echarts')
require('echarts/extension/bmap/bmap')
const convertData = function (data, geo) {
  const res = []
  data.forEach((item) => {
    const { name, value } = item
    const coord = geo[name]
    res.push({
      name,
      value: [...coord, value],
    })
  })
  return res
}
export default {
  data() {
    return {
      mapData: {
        data: [
          {
            name: '北京',
            value: 345,
          },
          {
            name: '上海',
            value: 342,
          },
          {
            name: '深圳',
            value: 245,
          },
        ],
        geo: {
          北京: [116.46, 39.92],
          上海: [121.48, 31.22],
          深圳: [114.07, 22.62],
        },
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const { data, geo } = this.mapData
      let myChart = this.$echarts.init(document.getElementById('map'))
      let option = {
        title: {
          text: '数据大盘',
          subtext: '销售趋势统计',
          sublink: 'https://www.imooc.com',
          left: 'center',
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: styleJson,
          },
        },
        series: [
          {
            name: '销售额',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: convertData(data, geo),
            encode: {
              value: 2,
            },
            itemStyle: {
              color: 'purple',
            },
            symbolSize: function (val) {
              return val[2] / 10
            },
            label: {
              show: false,
              position: 'right',
              formatter: function (v) {
                return `${v.data.name} - ${v.data.value[2]}`
              },
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            name: 'Top 10',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData(
              data.sort(function (a, b) {
                return b.value - a.value
              }),
              geo
            ).slice(0, 10),
            symbolSize: function (val) {
              return val[2] / 10
            },
            encode: {
              value: 2,
            },
            label: {
              formatter: function (v) {
                return `${v.data.name} - ${v.data.value[2]}`
              },
              position: 'right',
              show: true,
            },
            hoverAnimation: true,
            rippleEffect: {
              brushType: 'stroke',
            },
            itemStyle: {
              color: 'purple',
              shadowBlur: 10,
              shadowColor: '#333',
            },
          },
        ],
      }
      myChart.setOption(option, true)
      window.onresize = myChart.resize
    },
  },
}
</script>
<style lang="less" scoped>
.mapscatter {
  height: 100%;
  width: 100%;
  #map {
    height: 100%;
    width: 100%;
    position: relative;
  }
  /deep/.anchorBL {
    display: none;
  }
  /deep/.BMap_cpyCtrl {
    display: none;
  }
  /deep/.ec-extension-bmap {
    width: 80%;
    height: 100%;
  }
  /deep/.BMap_mask {
    height: 100%;
    width: 100%;
  }
}
</style>
